import React from 'react';
import {Chart,Interval,Line,Coordinate,Axis,Tooltip} from 'bizcharts';
import { Card } from 'antd';
class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    render() {
        const data = [
            {genre:'苹果',sold:100},
            {genre:'小米',sold:70},
            {genre:'华为',sold:110},
            {genre:'魅族',sold:60},
        ]
        const datas=[
            {item:'攻击力',value:60},
            {item:'防御力',value:91},
            {item:'智慧',value:88},
            {item:'敏捷',value:71},
            {item:'体力',value:100},
        ]
        const data2 = [
            {item:'苹果',percent:0.36},
            {item:'小米',percent:0.20},
            {item:'华为',percent:0.14},
            {item:'OPPO',percent:0.18},
            {item:'vivo',percent:0.12}
        ]
        const cols ={
            percent:{
                formatter:val=>{
                    val=val*100+"%"
                    return val
                }
            }
        }
        return (
            <div>
                {/* 柱状图 */}
                <Card style={{width:400,height:400}}>
                    <Chart height={400} autoFit data={data}>
                        <Interval position="genre*sold"/>
                    </Chart>
                </Card>
                {/* 线图 */}
                <Card style={{width:400,height:400}}>
                    <Chart height={400} autoFit data={data}>
                        <Line position="genre*sold"/>
                    </Chart>
                </Card>
                {/* 雷达图 */}
                <Card style={{width:400,height:400}}>
                    <Chart data={datas} height={400} autoFit scale={{
                        value:{
                            min:0,
                            max:100,
                        }
                    }}>
                        <Coordinate type={'polar'} radius={0.8}/>
                        <Line position="item*value" size={'2'}/>
                    </Chart>
                </Card>
                <Card style={{width:400,height:400}}>
                    <Chart height={400} autoFit data={data2} scale={cols}>
                        <Coordinate type={"theta"} radius={0.75}/>
                        <Axis visible={false}/>
                        <Interval
                            position="percent"
                            adjust="stack"
                            color="item"
                            style={{
                                lineWidth:1,
                                stroke:'#fff',
                            }}
                            label={['*',{
                                content:(data2)=>{
                                    return `${data2.item}：${(data2.percent * 100).toFixed(2)}%`
                                    // 针对数字，规范小数位
                                    // （0.123456789）.toFixed(2)
                                    // 保留两位小数，
                                }
                            }]}
                        />
                    </Chart>
                </Card>
            </div>
        );
    }
}

export default index;
// 数据可视化
// 1.web页面的形式，echarts百度的数据可视化库，bizchats阿里
// 2.office（excel做图，插入到 word,ppt)
// 3.数据统计工具（R，matlab，eviews，spss）
// 4.python做数据可视化，matplotlib，图片
// BI工具tableau，power BI，Fine BI 帆软。
